<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>带负值的分组柱状图</title>
  <link rel="stylesheet" href="./assets/common.css">
</head>
<body>
<div>
  <canvas id="mountNode"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.4/lodash.min.js"></script>
<script src="./assets/jquery-3.2.1.min.js"></script>
<script src="../build/f2-all.js"></script>
<script>
  const data = [
    { time: '周一', tem: 0, city: 'tokyo' },
    { time: '周二', tem: 9.5, city: 'tokyo' },
    { time: '周三', tem: 14.5, city: 'tokyo' },
    { time: '周四', tem: 18.2, city: 'tokyo' },
    { time: '周五', tem: 21.5, city: 'tokyo' },
    { time: '周六', tem: 25.2, city: 'tokyo' },
    { time: '周日', tem: 26.5, city: 'tokyo' },
    { time: '周一', tem: -10.8, city: 'newYork' },
    { time: '周二', tem: -5.7, city: 'newYork' },
    { time: '周三', tem: -11.3, city: 'newYork' },
    { time: '周四', tem: -17, city: 'newYork' },
    { time: '周五', tem: -22, city: 'newYork' },
    { time: '周六', tem: -24.8, city: 'newYork' },
    { time: '周日', tem: -24.1, city: 'newYork' },
    { time: '周一', tem: 2.6, city: 'berlin' },
    { time: '周二', tem: 3.5, city: 'berlin' },
    { time: '周三', tem: 8.4, city: 'berlin' },
    { time: '周四', tem: 13.5, city: 'berlin' },
    { time: '周五', tem: 17, city: 'berlin' },
    { time: '周六', tem: -18.6, city: 'berlin' },
    { time: '周日', tem: 17.9, city: 'berlin' }
  ];
  const chart = new F2.Chart({
    id: 'mountNode',
    width: window.innerWidth,
    height: window.innerWidth * 0.64,
    pixelRatio: window.devicePixelRatio
  });
  chart.source(data, {
    tem: {
      tickCount: 5
    }
  });
  chart.interval().position('time*tem')
    .color('city')
    .adjust('dodge')
    .style('tem', {
      radius(val) {
        return val > 0 ? [ 3, 3, 0, 0 ] : [ 0, 0, 3, 3];
      }
    })
  chart.render();
</script>
</body>
</html>
